<style lang="scss">
@import '~styles/common';
.nav {
  ul {
    li {
      text-align: center;
      height: 44px;
      line-height: 44px;
      list-style: none;
      a {
        color: $default-text;
        &.active,
        &:hover {
          color: $primary
        }
        &.active {
          &:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 48%;
            bottom: -10px;
            z-index: 10;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 14px solid $card-bg;
          }
        }
      }
    }
  }
  .active-border {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 48%;
    bottom: -9px;
    z-index: 1;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid rgba(0, 0, 0, 0.24);
  }
  .active+.active-border {
    display: block;
  }
}

@media (max-width: $screen-sm-min) {
  .nav {
    ul {
      li {
        a {
          &.active {
            &:after {
              left: 42%;
            }
          }
        }
      }
    }
    .active-border {
      left: 42%;
    }
  }
}
</style>
<template>
<nav class="nav">
    <div class="container">
        <ul class="row">
            <li class="col-md-2 col-xs-3 ">
                <a v-link="{ path: '/security', activeClass: 'active' }">
                    <span class="fa fa-lock"></span>
                    <span class="hidden-xs">帐号安全</span>
                </a>
                <div class="active-border"></div>
            </li>
            <li class="col-md-2 col-xs-3">
                <a v-link="{ path: '/info', activeClass: 'active' }">
                    <span class="fa fa-user"></span>
                    <span class="hidden-xs">个人信息</span>
                </a>
                <div class="active-border"></div>
            </li>
        </ul>
    </div>
</nav>
</template>

<script>
/**
 * @author guocailee
 */
export default {
  name: 'zkNav'
}

</script>